<script setup>
import {ref} from 'vue'

// import Prism Editor
import {PrismEditor} from 'vue-prism-editor' //
import 'prismjs/themes/prism.css' // import the styles somewhere
import 'vue-prism-editor/dist/prismeditor.min.css'

// import highlighting library (you can use any library you want just return html string)
import prism from 'prismjs'

// clipboard
import useClipboard from 'vue-clipboard3'

// prop
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  code: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  height: {
    type: String,
    default: '',
  },
})

// variables
const {toClipboard} = useClipboard()
const editorCode = ref(props.code)

// functions
const copy = async (event) => {
  try {
    await toClipboard(editorCode.value)
    const el = event.target.parentElement
    var alert = document.createElement('div')
    alert.classList.add(
      'alert',
      'alert-success',
      'position-absolute',
      'top-5',
      'border-0',
      'text-white',
      'w-25',
      'end-0',
      'start-0',
      'mt-2',
      'mx-auto',
      'py-2'
    )
    alert.style.transform = 'translate3d(0px, 0px, 0px)'
    alert.style.opacity = '0'
    alert.style.transition = '.35s ease'
    setTimeout(function () {
      alert.style.transform = 'translate3d(0px, 20px, 0px)'
      alert.style.setProperty('opacity', '1', 'important')
    }, 100)
    alert.innerHTML = 'Code successfully copied!'
    el.parentElement.appendChild(alert)
    setTimeout(function () {
      alert.style.transform = 'translate3d(0px, 0px, 0px)'
      alert.style.setProperty('opacity', '0', 'important')
    }, 2000)
    setTimeout(function () {
      el.parentElement.querySelector('.alert').remove()
    }, 2500)
  } catch (e) {
    console.error(e)
  }
}

const highlighter = (code) => {
  return prism.highlight(code, prism.languages.html)
}
</script>

<template>
  <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
    <div class="container border-bottom">
      <div class="row justify-space-between py-2">
        <div class="col-lg-3 me-auto">
          <p class="lead text-dark pt-1 mb-0">{{ title }}</p>
        </div>
        <div class="col-lg-3">
          <div class="nav-wrapper position-relative end-0">
            <ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
              <li class="nav-item">
                <a
                  class="nav-link mb-0 px-0 py-1 active"
                  data-bs-toggle="tab"
                  :href="`#preview-${id}`"
                  role="tab"
                  aria-selected="true"
                >
                  <i class="fas fa-desktop text-sm me-2"></i> Preview
                </a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link mb-0 px-0 py-1"
                  data-bs-toggle="tab"
                  :href="`#code-${id}`"
                  role="tab"
                  aria-selected="false"
                >
                  <i class="fas fa-code text-sm me-2"></i> Code
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-content tab-space">
      <div class="tab-pane active p-2" :id="`preview-${id}`">
        <div class="overflow-auto" :class="`${height && `height-${height}`}`">
          <slot />
        </div>
      </div>
      <div class="tab-pane" :id="`code-${id}`">
        <div class="position-relative p-4 pb-2">
          <a
            class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3 z-index-3"
            @click="copy($event)"
            href="javascript:;"
            ><i class="fas fa-copy text-sm me-1"></i> Copy</a
          >
          <figure class="highlight">
            <PrismEditor
              class="p-2 bg-gray-100 border-radius-xl height-800 my-editor"
              v-model="editorCode"
              :highlight="highlighter"
              line-numbers
              readonly
            ></PrismEditor>
          </figure>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.my-editor {
  /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
  color: black;
  /* you must provide font-family font-size line-height. Example: */
  font-family: Consolas, Fira Mono, Menlo, Courier, monospace;
  font-size: 1em;
  line-height: 1.5;
  padding: 5px;
  tab-size: 4;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
  outline: none;
}
</style>
